<template>
    <layout>
        <div class="ctrl">
            <el-input v-model="key" placeholder="请输入关键字" style="width:200px"></el-input>
            <el-button @click="$router.push('/brand/create')">新增品牌</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%">
        <el-table-column  prop="id" label="ID" ></el-table-column>
        <el-table-column  prop="name" label="品牌名称" ></el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="$router.push('/brand/edit/' + scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>



    </layout>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            key: ''
        }
    },
    created() {
        this.getData()
    },
    watch: {
        key(val) {
            this.getData()
        }
    },
    methods: {
        getData(){
            let push = `/brand/select`
            if(this.key){
                push = `/brand/select?key=${this.key}`
            }
            this.$http.get(push).then(res => {
                if(res.errcode == 0){
                    this.tableData = res.data
                }
            })
        },
        del(item, index){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('/brand/trash',{
                    id: item.id
                }).then(res => {
                    if(res.errcode == 0){
                        this.tableData.splice(index, 1)
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });

        }
    }
}
</script>

<style>
.ctrl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
</style>